<template>
	<div>
		<Header is-scrolled="false" :message="contentdata" />
		<!--==========================
            Intro Section
            ============================-->
		<section id="intro" style="height: auto;">
			<div class="intro-container">
				<el-carousel height="50vh" :interval="3000" arrow="always">
					<el-carousel-item v-for="(banner, index) in siteConfig.banners" :key="index">
						<el-image :src="banner.bannerImg" style="width: 100%;height: 120%;" fit="cover">
						</el-image>
						<!-- style="height: 500px; width: 600px; position: relative; align-items: center;" -->
						<!-- 	<div class="carousel-container">
							<div class="carousel-content">
								<h2 v-html="banner.mainTitle"></h2>
								<p v-html="banner.subTitle"></p>
								<a href="./index.html" class="btn-get-started scrollto">Get Started</a>
							</div>
						</div> -->
					</el-carousel-item>
				</el-carousel>
			</div>
		</section>

		<section id="news">

			<div class="title">
				<div class="titletop">
					<div class="text">{{contentdata.fourthScreen.mainTitle}}</div>
					<!-- <div class="eng">/NEWS</div> -->
				</div>
				<!-- <div class="titlebot">
					为您管道安全保驾护航
				</div> -->
			</div>
			<div class="detail">
				<div class="dtop">
					<div class="dleft">
						<img :src="detail.mainImg" alt="">
					</div>
					<div class="dright">
						<div class="dtitle">{{detail.mainTitle}}</div>
						<div class="dtime">{{detail.date}}</div>
					</div>
				</div>
				<div class="dcontent">
					{{detail.text}}
				</div>
			</div>

		</section>

		<Footer :message="contentdata" />

	</div>
</template>

<script>
	import Header from '../components/newsHeader.vue';
	import Footer from '../components/newsFooter.vue';
	import {
		showAchievements
	} from '@/api/openAchievementApi.js'
	import {
		pocsList
	} from '@/api/openPocsApi.js'
	import {
		ccieList
	} from '@/api/openCcieApi.js'
	import {
		raceList
	} from '@/api/openRaceApi.js'
	import {
		getSiteStatistics
	} from '@/api/openSiteApi.js'
	import {
		querySiteConfig
	} from '@/api/openSiteApi.js'
	export default {
		name: 'Index',
		components: {
			Header,
			Footer
		},
		data() {
			return {
				xwshow: false,
				detail: {},
				dialogVisible: false,
				detailTitle: '',
				iconlist: ['ion-ios-speedometer-outline', 'ion-ios-list-outline', 'ion-ios-eye-outline',
					'ion-android-folder', 'ion-android-favorite', 'ion-ios-star-outline', 'ion-ios-sunny',
					'ion-ios-telephone', 'ion-ios-tennisball', 'ion-ios-time', 'ion-ios-trash', 'ion-ios-undo',
					'ion-ios-volume-high', 'ion-ios-wineglass-outline'
				],
				contentdata: {},
				// 全局动态配置
				// 创建团队时间
				createTeamYear: this.$store.state.site.siteCreateTime !== '' ? this.$store.state.site.siteCreateTime
					.substring(0, 4) : 2001,
				// 动态配置
				activeName: 'first',
				stretch: true,
				curClickPocs: 1, // 当前选中的栏目
				// 网站主页配置查询条件
				siteConfigParms: {
					configKey: this.$MY_CONSTANT.SITE_CONFIG.SITE_PAGE_MAIN_CONFIG.configKey
				},
				// 网站主页技术栈查询条件查询参数
				siteSkillConfigParams: {
					configKey: this.$MY_CONSTANT.SITE_CONFIG.SITE_PAGE_SKILL_CONFIG.configKey
				},
				// 网站主页基础配置
				siteConfig: {
					banners: [
						// {
						// 	"bannerImg": "https://pictured-bed.oss-cn-beijing.aliyuncs.com/img/2024/071.png",
						// 	"mainTitle": "欢迎来到汉科国际外贸网站",
						// 	"subTitle": "一群志同道合的人，一起奔跑在理想的路上..."
						// },
						// {
						// 	"bannerImg": "https://pictured-bed.oss-cn-beijing.aliyuncs.com/img/2024/072.png",
						// 	"mainTitle": "关于我们",
						// 	"subTitle": "最好的团队，最好的我们，不负韶华，努力奋斗。"
						// },
						// {
						// 	"bannerImg": "https://pictured-bed.oss-cn-beijing.aliyuncs.com/img/2024/073.png",
						// 	"mainTitle": "时光轴",
						// 	"subTitle": "时间是温柔的羽毛，把过往的灰尘轻轻弹去。"
						// },
						// {
						// 	"bannerImg": "https://pictured-bed.oss-cn-beijing.aliyuncs.com/img/2024/074.png",
						// 	"mainTitle": "团队",
						// 	"subTitle": "拍照只需要三秒，可锁住的是我们三年青春，感谢遇见！"
						// }
					],
					teamDescription: '这里是物联网工作室，在这里不仅有学习硬件，还有学习软件的小伙伴们，我们都在前进的路上，未来值得期待！\n工作室有着丰富的学习资源，有着可以帮助你解决问题的学长学姐们以及专业指导老师，让你不断在专业领域进行探索和挖掘知识宝藏。\n',
					teamMission: '把我们的努力和知识，化身成有价值的产品，在未来物联网领域开拓出一片新的天地.',
					teamPlan: '多方位的扩展技术方面的人才，将想法进行落实.',
					teamVision: '期望所有的成员能够学有所成，在各自的领域发光发亮，取得优秀的成绩.'
				},
				// 技术栈配置
				skillConfig: [{
						skillName: 'Java',
						skillPercentage: 10
					},
					{
						skillName: '网站开发',
						skillPercentage: 10
					},
					{
						skillName: '上位机',
						skillPercentage: 10
					},
					{
						skillName: 'openCV',
						skillPercentage: 10
					},
				],
				// 自定义进度条颜色
				customColors: [{
						color: '#f56c6c',
						percentage: 20
					},
					{
						color: '#e6a23c',
						percentage: 40
					},
					{
						color: '#5cb87a',
						percentage: 60
					},
					{
						color: '#1989fa',
						percentage: 80
					},
					{
						color: '#6f7ad3',
						percentage: 100
					}
				],
				// 展示成果数组
				showAchievementArr: [],
				// 成果分类列表
				pocsArr: [{
						"id": 0,
						"pocsName": "闸阀"
					},
					{
						"id": 2,
						"pocsName": "截止阀"
					},
					{
						"id": 3,
						"pocsName": "止回阀"
					},
					{
						"id": 4,
						"pocsName": "过滤器"
					},
					{
						"id": 5,
						"pocsName": "其他阀门和配件"
					},
					{
						"id": 6,
						"pocsName": "空气阀"
					},
					{
						"id": 7,
						"pocsName": "消防栓"
					},
					{
						"id": 8,
						"pocsName": "蝶阀"
					},
					{
						"id": 9,
						"pocsName": "球阀"
					}
				],
				// 展示证书列表
				showCcieArr: [],
				// 展示竞赛列表
				showRaceArr: [],
				// 网站统计数据
				statisticsData: {},
				// 预览图片
				bigImageUrl: '',
				logicImageList: [],
				// 成果年份下拉选项
				achievementYearOptions: [],
				// 成果年份查询
				searchAchievementYear: '',
				// 荣誉资质年份下拉选项
				honerYearOptions: [],
				// 荣誉资质年份查询
				searchHonerYear: '',
				alldata: [],
				oldata: [],
				detail: {}
			}
		},
		created() {
			this.init()
			// let detaildata =this.$route.query.detail
			// console.log(detaildata,'8888888')
			this.detail = JSON.parse(this.$route.query.detail)
			console.log(this.detail, '8888888')
		},
		methods: {
			godetail(detail) {
				console.log(detail)
			},
			init() {
				window.curPage = 'index'
				// 获取网站主页配置信息
				this.$getSiteConfig(this.siteConfigParms).then(configValue => {
					console.log(configValue, 'configValue')
					this.siteConfig.banners = configValue.bannerTableData
					this.siteConfig.teamDescription = configValue.teamDescription.replace(/\n/g, '<br />')
					this.siteConfig.teamMission = configValue.teamMission.replace(/\n/g, '<br />')
					this.siteConfig.teamPlan = configValue.teamPlan.replace(/\n/g, '<br />')
					this.siteConfig.teamVision = configValue.teamVision.replace(/\n/g, '<br />')
				});
				querySiteConfig({
					configKey: "site.page.contentConfig"
				}).then(configValue => {
					console.log(configValue, 'configValue111')
					if (configValue.code == 200) {
						this.contentdata = configValue.data.configValue
						this.contentdata.fourthScreen.newsList.forEach((item, index) => {
							console.log(item.date.split('-'), 5556666)
							item.newdate = item.date.split('-')
						})
						// this.contentdata.secondScreen.forEach((item, index) => {
						// 	item.icon = this.iconlist[index]
						// })
						// this.fourlist = this.contentdata
						console.log(this.contentdata, 'configValue222')
					}
				});


			},
		}
	}
</script>

<style scoped lang="scss">
	#news {
		width: 1500px;
		margin: 0 auto;
		padding: 30px;
		.detail{
			.dtop{
				display: flex;
				margin-bottom: 20px;
				.dright{
					line-height: 45px;
					.dtitle{
						font-weight: 600;
					}
				}
				.dleft{
					margin-right: 20px;
					img{
						width: 100px;height: 100px;
					}
				}
			}
		}
		.title {
			border-left: 6px solid #ffc71c;
			padding-left: 10px;
			height: 67px;
			margin-bottom: 20px;

			.titlebot {
				font-style: normal;
				color: #333333;
				font-size: 16px;
			}

			.titletop {
				display: flex;

				.text {
					color: #013596;
					font-size: 44px;
					font-weight: bold;
				}

				.eng {
					color: #999999;
					font-size: 24px;
					font-weight: normal;
					text-transform: uppercase;
					padding-left: 10px;
				}
			}
		}

		.newscontent {
			display: flex;
			justify-content: space-between;

			.newsr {
				display: flex;
				width: 690px;
				margin-top: 40px;
				justify-content: space-between;

				.newslist {
					border: 1px solid #999999;
					padding: 15px;
					width: 220px;
					height: 605px;
					background: #fff;
					transition: 0.5s;
					overflow: hidden;

					.newsms {
						color: #666666;
						font-size: 14px;
						line-height: 25px;
						padding-top: 20px;
						padding-bottom: 20px;
						height: 224px;
						overflow: hidden;
						display: -webkit-box;
						-webkit-box-orient: vertical;
						-webkit-line-clamp: 8;
						/* 限制显示的行数为3 */
					}

					.newstitle {
						text-align: left;
						color: #333333;
						font-size: 17px;
						line-height: 25px;
						height: 70px;
						display: -webkit-box;
						-webkit-box-orient: vertical;
						-webkit-line-clamp: 3;
						/* 限制显示的行数为3 */
						overflow: hidden;
					}

					.newstime {
						// float: left;
						line-height: 30px;
						text-align: left;
						font-weight: normal !important;
						color: #b6b6b6;
						font-size: 16px;
						padding: 0 !important;
						margin: 20% 0 15%;

						.day {
							display: block;
							margin: 0 auto;
							width: 100%;
							text-align: left;
							height: 40px;
							color: #494949;
							font-size: 40px;
							font-weight: bold;
							border-bottom: 1px solid #999999;
						}

						.time {}
					}

					.newsimg {

						img {
							width: 100%;
							height: 140px;
						}
					}
				}
			}

			.newsl {
				img {
					width: 670px;
					height: 670px;
				}
			}
		}
	}
</style>